<!DOCTYPE html>
 <html lang="en">
 
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>文件下载</title>
   <style>
   </style>
 </head>
 
 <body>
    <a href="http://localhost:8081/file/downloadTemplate" rel="external nofollow"  
            download="test.png">点击下载</a>
    <form enctype="multipart/form-data" method="post">
        <input type="file" name="file">
        <button type="button" onclick="uploadFile()">上传文件</button>
    </form>
</body>
 <script>
    function uploadFile() {
        var fileInput = document.querySelector('input[type="file"]');
        var file = fileInput.files[0];
        var formData = new FormData();
        formData.append('file', file);

        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'http://localhost:8081/file/uploadBarFiberInfo', true);
        xhr.upload.addEventListener('progress', function(e) {
            if (e.lengthComputable) {
                var percentComplete = (e.loaded / e.total) * 100;
                console.log(percentComplete + '%');
            }
        }, false);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                console.log(xhr.responseText);
            }
        };
        xhr.send(formData);
    }
 </script>

 